<template>
  <view class="hs-tab-007">
    <view class="search-text-list">
      <swiper
        class="swiper"
        circular
        :vertical="true"
        :autoplay="true"
        :interval="5000"
        :duration="300"
      >
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <view class="swiper-item">
            <view class="left-text">
              <text class="tips">{{ item.tips }}</text>
              <text class="title">{{ item.title }}</text>
            </view>
            <view class="right-text">
              <text class="guidance" v-if="item.guidance">{{
                item.guidance
              }}</text>
              <text class="iconfont icon-weibiaoti--10"></text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    tabList: {
      type: Array,
      default: () => [
        {
          tips: "上新",
          title: "闲鱼·大行自行车P8",
          guidance: "查看",
        },
        {
          tips: "TIPS",
          title: "闲鱼·自行车骑行头盔",
          guidance: "更多",
        },
        {
          tips: "上新",
          title: "闲鱼·冬季男款长裤",
          guidance: "查看",
        },
      ],
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-007 {
  height: 70rpx;
  .search-text-list {
    height: 100%;
    line-height: 70rpx;
    box-sizing: border-box;
    color: #000;
    border-radius: 10rpx;
    // background: #fff;
    overflow: hidden;
    .swiper {
      height: 100%;
      .t-icon-guanjun {
        width: 40rpx;
        height: 40rpx;
      }
      .red-text {
        color: #fff;
        height: 22rpx;
        line-height: 22rpx;
        background: red;
        padding: 0 8rpx;
        border-radius: 14rpx 14rpx 14rpx 0;
        font-size: 22rpx;
        margin-left: 10rpx;
        font-weight: 700;
      }
      .swiper-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 300;
        padding: 0 20rpx;
        .left-text {
          display: flex;
          align-items: center;
          .tips {
            color: #000;
            // 文字倾斜
            transform: skewX(-20deg);
            font-weight: 700;
            margin-right: 15rpx;
            font-size: 26rpx;
            // background: linear-gradient(
            //   to right,
            //   #ff4646,
            //   #ff7b00,
            //   #06a800,
            //   #001aff,
            //   #ff00f2
            // );
            // background-clip: text;
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
          }
          .title {
            font-size: 24rpx;
            color: #333;
          }
        }
        .right-text {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #666;
          .guidance {
            font-size: 24rpx;
            margin-right: 5rpx;
          }
          .icon-weibiaoti--10 {
            display: block;
            font-size: 20rpx;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}
</style>
